<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绑定class</title>
	<style type="text/css">
		.green{color:green;}
		.red{color:red}
		.aaa{background: green;}
	</style>
</head>
<body>
	<div id="app">
		<p :class="{red:classList.red}" class="green" @click="change">hello class</p>
		<p :class="[classList.aaa]" class="red">hello class</p>
	</div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	/*
		class 可以是数组，可以是字符串，可以是对象
		:class="{className:data.msg,className:data.msg}"
		:class="className"
		:class="[data.msg,data.msg]"
		:class="[data.msg,data.msg,{className:data.msg,className:data.msg}]"

		注意烤串类名需要引号，否则报错
			如： 类名 item-active,
				:class="{'item-actived' : condition statement}"
	*/
	// 需要通过类名更新视图的话，可以通过 v-bind 绑定
	// 被绑定的数据为键值对

	
	const vm = new Vue({
		el : '#app',
		data : {
			classList : {
				red : false,
				aaa : 'aaa'	
			}
		},
		methods : {
			change(){
				this.classList.aaa = 'bbb';
			}
		}
	});
</script>